<template>
  <Drawer
    title="智能除渍"
    desc="系统会根据选择的污渍类型，自动调整洗涤参数（如温度、转速、时间等）来有效祛除污渍"
    type="confirm"
    :show="show"
    @close="closeCustomDrawer"
    @confirm="confirmCustomDrawer"
  >
    <view class="stain-scroll">
      <view class="stains">
        <view v-for="(option, index) in stainOptions" :key="index" class="option" @click="chooseStain(option.value)">
          <view class="radio" :class="{ active: option.value === currentValue }"> </view>
          <view class="text">{{ option.label }}</view>
        </view>
      </view>
    </view>
  </Drawer>
</template>

<script setup lang="ts">
import Drawer from '@/common/drawer.vue'
import type { ProgramAvailable } from '@/api/appliance'
import { WASHER_STAINS } from '@/constants/Command'
import { getEnumOptions, setVirtualOptionValue } from '../../view/availableParameterUtils'
import type { WasherDryerController } from '@/controller/WasherDryer/definition'

const props = defineProps<{
  show: boolean
  control: WasherDryerController.Control
}>()
const emit = defineEmits<{
  (e: 'update:show', show: boolean): void
}>()

/**
 * 选项
 */
const stainOptions = computed(() => {
  const rawOptions = props.control.store.availableParameter?.options?.find(
    (option) => option.key === WASHER_STAINS
  ) as ProgramAvailable.EnumOption
  if (!rawOptions) return []
  return getEnumOptions(rawOptions) as { label: string; value: string }[]
})

const currentValue = ref('')
watchEffect(() => {
  currentValue.value = props.control.store.stainValue
})

/**
 * 关闭弹窗
 */
function closeCustomDrawer() {
  emit('update:show', false)
}

/**
 * 选择污渍参数
 */
async function chooseStain(value: string) {
  currentValue.value = value
}
async function confirmCustomDrawer(): Promise<void> {
  closeCustomDrawer()

  if (props.control.store.isVirtualAppliance) {
    // 虚拟家电手动修改值
    setVirtualOptionValue(props.control, WASHER_STAINS, currentValue.value)
    props.control.store.stainValue = currentValue.value
    return
  }

  return props.control.store.selectProgramOptions([
    {
      key: WASHER_STAINS,
      value: currentValue.value,
    },
  ])
}
</script>
<style scoped lang="less">
.stain-scroll {
  overflow: auto;
  padding: 16rpx 16rpx 0rpx;
}
.stains {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-column: 2;
}
.option {
  margin-bottom: 48rpx;
  display: flex;
  flex-direction: row;
  .radio {
    padding: 8rpx;
    width: 40rpx;
    height: 40rpx;
    box-sizing: border-box;
    border-radius: 50%;
    border: 2rpx solid var(--primary-color);
    display: grid;
    justify-content: center;
    align-items: center;
    margin-right: 24rpx;
    &.active::before {
      margin-top: -2rpx;
      content: '';
      width: 24rpx;
      height: 24rpx;
      border-radius: 50%;
      background: var(--primary-color);
    }
  }
  .text {
    font-size: 32rpx;
    font-weight: 400;
    color: var(--dark-color);
  }
}
</style>
